﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>GetUser</title>
    @*<link href="~/lib/element-ui/theme-chalk/index.css" rel="stylesheet" />*@
    <link href="~/css/main.css" rel="stylesheet" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="~/vue/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.2/vue-resource.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
    <div id="app" style="height:100%;">
        <el-container>
            <el-header style="text-align: right; font-size: 12px;background-color:#545c64">
                <el-menu mode="horizontal" background-color="#545c64">
                    <el-menu-item>
                        @*<img src="D:\技能\client\Store.Client\Img\silvon-inc-20-240.png"  style="width:50px;height:50px" />*@
                        <a style="font-size:30px;color:white">商城管理后台</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white">首页</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white">商品</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white">订单</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white">用户</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white">促销</a>
                    </el-menu-item>
                    <el-menu-item>
                        <a style="font-size:20px;color:white">权限</a>
                    </el-menu-item>
                </el-menu>
            </el-header>
            <el-container>
                <el-aside width="230px">
                    <el-menu default-active="2"
                             class="el-menu-vertical-demo"
                             @@open="handleOpen"
                             @@close="handleClose"
                             background-color="#545c64"
                             text-color="#fff"
                             active-text-color="#ffd04b"
                             style="height:100%;">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航一</span>
                            </template>
                            <el-menu-item-group>
                                <template slot="title">

                                </template>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="1-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-4">
                                <template slot="title">
                                    选项4
                                </template>
                                <el-menu-item index="1-4-1">选项1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">导航二</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-setting"></i>
                            <span slot="title">导航三</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    @*表头*@
                    <template>
                        @*查询*@
                        <el-form :inline="true" :model="getData" class="demo-form-inline">
                            <template slot-scope="scope">
                                <div>
                                    最近消费：
                                    <el-radio-group v-model="getData.userAccount">
                                        <el-radio-button label="一周内"></el-radio-button>
                                        <el-radio-button label="二周内"></el-radio-button>
                                        <el-radio-button label="一月内"></el-radio-button>
                                        <el-radio-button label="二月内"></el-radio-button>
                                    </el-radio-group>
                                </div>
                                <div style="margin-top: 20px">
                                    消费次数：
                                    <el-radio-group v-model="getDate.userCount" size="medium">
                                        <el-radio-button label="一次"></el-radio-button>
                                        <el-radio-button label="两次"></el-radio-button>
                                        <el-radio-button label="三次"></el-radio-button>
                                        <el-radio-button label="四次"></el-radio-button>
                                    </el-radio-group>
                                </div>
                                <div style="margin-top: 20px">
                                    消费金额：
                                    <el-radio-group v-model="getData.userPrice" size="medium">
                                        <el-radio-button label="50"></el-radio-button>
                                        <el-radio-button label="51-100"></el-radio-button>
                                        <el-radio-button label="101-200"></el-radio-button>
                                        <el-radio-button label="200-500"></el-radio-button>
                                    </el-radio-group>
                                </div>
                                <div style="margin-top: 20px">
                                    订单均价：
                                    <el-radio-group v-model="getData.userAvg" size="medium">
                                        <el-radio-button label="50"></el-radio-button>
                                        <el-radio-button label="51-100"></el-radio-button>
                                        <el-radio-button label="101-200"></el-radio-button>
                                        <el-radio-button label="200-500"></el-radio-button>
                                    </el-radio-group>
                                </div>
                                <div style="margin-top: 20px">
                                    用户标签：
                                    <el-radio-group v-model="getData.userName" size="medium">
                                        <el-radio-button label="上海"></el-radio-button>
                                        <el-radio-button label="北京"></el-radio-button>
                                        <el-radio-button label="广州"></el-radio-button>
                                        <el-radio-button label="深圳"></el-radio-button>
                                    </el-radio-group>
                                </div>
                            </template>
                        </el-form>
                        @*表头*@
                        <el-table :data="tableData"
                                  style="width: 100%">
                            <el-table-column type="selection"
                                             width="55">
                            </el-table-column>
                            @*账号*@
                            <el-table-column label="UserAccount"
                                             prop="userAccount">
                            </el-table-column>
                            @*昵称*@
                            <el-table-column label="UserName"
                                             prop="userName">
                            </el-table-column>
                            @*消费金额*@
                            <el-table-column label="UserPrice"
                                             prop="userPrice">
                            </el-table-column>
                            @*消费次数*@
                            <el-table-column label="UserCount"
                                             prop="userCount">
                            </el-table-column>
                            @*订单均价*@
                            <el-table-column label="UserAvg"
                                             prop="userAvg">
                            </el-table-column>
                            @*购买时间**@
                            <el-table-column label="UserBuytime"
                                             prop="userBuytime">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" v-on:click="handleEdit(scope.$index, scope.row,scope.value)">查看</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        @*分页*@
                        <el-pagination class="mpage" :model="current" ref="current"
                                       background
                                       @@size-change="handleSizeChange" @*修改显示条数触发事件*@
                                       @@current-change="page" @*换页触发事件*@
                                       :current-page="current.currentPage"
                                       :page-sizes="[2, 4, 6]"
                                       :page-size="current.pageSize"
                                       layout="total, sizes, prev, pager, next, jumper"
                                       :total="current.total">
                        </el-pagination>
                        @* 弹出显示对话框 *@
                        <el-dialog title="添加" :visible.sync="outTable">
                            <el-form :model="updateData">
                                <el-form-item label="UserAccount" :label-width="formLabelWidth">
                                    <el-input v-model="updateData.userAccount" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="UserName" :label-width="formLabelWidth">
                                    <el-input v-model="updateData.userName" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="UserPrice" :label-width="formLabelWidth">
                                    <el-input v-model="updateData.userPrice" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="UserCount" :label-width="formLabelWidth">
                                    <el-input v-model="updateData.userCount" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="UserAvg" :label-width="formLabelWidth">
                                    <el-input v-model="updateData.userAvg" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="UserBirthday" :label-width="formLabelWidth">
                                    <el-input v-model="updateData.userBirthday" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="UserBuytime" :label-width="formLabelWidth">
                                    <el-input v-model="updateData.userBuytime" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button v-on:click="add = false">取 消</el-button>
                            </div>
                        </el-dialog>
                    </template>
                </el-main>
            </el-container>
        </el-container>
    </div>
</body>
</html>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data() {
            return { 
                tableData: [],
                formLabelWidth: '120px',
                //分页
                current: {
                    //默认
                    currentPage: 1,//页码
                    total: 0,//总共多少条
                    pageSize: 4//每页多少条数据
                },
                getData: {
                    userAccount: '',
                    userName: '',
                    userPrice: '',
                    userCount: '',
                    userAvg:''
                },
                outTable: false,
                updateData: {
                    userAccount: '',
                    userName: '',
                    userPhone: '',
                    userSex: '',
                    ureateTime: '',
                    userPwd: '',
                    userPrice: '',
                    userCount: '',
                    userAvg: '',
                    userBirthday: '',
                    userImg: '',
                    userBuytime: '',
                    userState: '',
                    userBalance: '',
                }
            }
        },
        
        created: function () {
           
            this.getDate();
            alert(getData);
        },
        methods: {
            //显示
            getDate() {
                var url = "http://localhost:62874/api/Users/GetUsers2";
                this.$http.get(url, {
                    params: {
                        userName: this.getData.userName,
                        userAccount: this.getData.userAccount,
                        userPrice: this.getData.userPrice,
                        userCount: this.getData.userCount,
                        userAvg: this.getData.userAvg,
                        pageIndex: this.current.currentPage,
                        pageSize: this.current.pageSize
                    }
                }).then(function (result) {
                    console.log(this.tableData.body);
                    this.tableData = result.body.data;
                    this.current.total = result.body.total;
                });
            },
            //查询
            onSubmit() {
                this.getDate();
            },
            //反填
            handleEdit(row, value) {
                this.updateData = row;
                this.updateData = value;
                this.outTable = true;
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            page(value) {
                this.current.currentPage = value;
                this.getData();
            },
            handleSizeChange(val) {
                this.current.pageSize = val;
                this.getData();
            }
        }
    });
</script>
